<template>
	<div class="c-c-panel">
		<div class="w-poster">
			<img
				:src="JSON.parse(data.poster).url + '-works_m_poster'" />
		</div>
		
		<div style="flex: 1;">
			<div class="w-info-panel">
				<div class="w-l-p">
					<span 
						class="w-attr" 
						v-text="data.attribute.name"
						:style="{'border':'1px solid ' + data.attribute.strokeColor,
						'background-color': data.attribute.bgColor,
						'color':data.attribute.textColor}"></span>
					<p 
						class="w-name" 
						v-text="data.name"></p>
				</div>
				<div class="w-r-p">
					<p v-text="'年份：' + data.releaseYear + '年'"></p>
					<p v-text="'票房：' + boxOfficeFormat"></p>
				</div>
			</div>
			<CEntityTagsView
				:data="data.etags">
			</CEntityTagsView>
		</div>
	</div>
</template>

<script>
	import CEntityTagsView from '@/components/CEntityTagsView.vue';
	
	export default {
		name: 'CWorksItem2User',
		data() {
			return {}
		},
		components: {
			CEntityTagsView
		},
		computed: {
            boxOfficeFormat: function() {
            		if(this.data.boxOffice > 10000) {
            			return this.data.boxOffice / 10000 + '亿';
            		}
                return this.data.boxOffice + '万';
            }
        },
		props: {
			data: {
				type: Object
			}
		}
	}
</script>

<style scoped="scoped">
	.c-c-panel {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
	}
	
	.w-info-panel {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		padding-bottom: 10px;
		margin-bottom: 0px;
	}
	
	.w-poster {
		width: 100px;
		height: 140px;
		margin-right: 15px;
		background-color: #F0F0F0;
	}
	.w-poster img {
		width: 100px;
		height: 140px;
	}
	
	.w-attr {
		border-radius: 5px;
		font-size: 12px;
		padding: 2px 5px;
	}
	
	.w-name {
		font-size: 18px;
		color: #000000;
		opacity: 0.87;
		margin-top: 10px;
	}
	.w-l-p {
		flex: 1;
	}
	.w-r-p {
		color: #000000;
		opacity: 0.54;
		font-size: 13px;
	}

</style>